<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<style type="text/css">
		*{
			list-style: none;
			text-decoration: none;
		}
		#quanbu{
			width: 100%;
			box-sizing: border-box;
			padding-left: 30px;
			padding-right: 30px;
		}
		#all{
			text-align: center;
			width: 100%;
		}
		#sou{
			margin-top: 30px;
			margin-left: 50%;	
		}
		#table{
			border-spacing: 0;
			width:100%;
			margin-top: 0px;
		}
		#table tr{
			border-bottom: 1px solid #CCCCCC;
		}
		#table tr:nth-child(2n+1){
			background-color:##999999;
			height: 25px;
		}
		#table tr:nth-child(2n+2){
			background-color:#CCCCFF;
			height: 25px;
		}
		/*#table tr:nth-child(4n+3){
			background-color:#FFFF99;
			height: 25px;
		}
		#table tr:nth-child(4n+4){
			background-color:#99ffcc;
			height: 25px;
		}*/
		#table th{
			text-align: center;
			font-style: 1.1em;
		}
		#table td{
			width: 150px;
			height: 30px;
			text-align: center;
			font-size: 1.1em;
		}
		#fenye{
			margin-left: 1px;
		}
		.pagehead{
			background-color: #f5f5f5;
			height: 40px;
		}
		.pagehead h1{
			margin: 0;
			font-size: 18px;
			line-height: 40px;
			padding-left: 12px;
		}
		#bottom{
			margin-top: 20px;
			border-bottom: 2px solid #ff8c00;
		}
		.button {
			background-color: #4CAF50; /* Green */
			border: none;
			color: white;
		    padding: 3px 9px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
		}
		.shuru{
			padding: 3px 12px;
			height: 20px;
		}


	</style>
</head>
<body onload="f1()">
	<div id="quanbu" >
		<div class="pagehead">
			<h1>
				<i class="fa fa-home" style="color: blue;"></i>&nbsp;&nbsp;您当前的位置：<a href="adminUser.html">首页</a>
			</h1>
		</div>
		<div id="bottom"></div>
		<div id="all">
			<form id="findByName_form">
				<div>
					<input type="text" name="userName" value="" id="sou" placeholder="请输入你要查询的用户名">
					<input type="text" class="shuru" name="page" value="" id="sou1" hidden="hidden" >  <!-- 记录的是当前页 -->
					<button type="button" class="button" onclick="findByName('findByName_form')">查询</button>
				</div>
				<div>
					<table  id="table">


					</table>
				</div>
				<div id="fenye">
					<ul class="pagination">
						<li><a href="#" onclick="findByPage(['findByName_form',0])">首页</a></li>
						<li><a href="#" onclick="findByPage1('findByName_form')">上一页</a></li>
						<li><a href="#" onclick="findByPage2('findByName_form')">下一页</a></li>
						<li><a href="#" onclick="findByPage3()">尾页</a></li>
					</ul>
				</div>
			</form>
		</div>
	</div>

	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
	<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/ejs.min.js"></script>

	<script type="text/javascript">

		//表示上一页，当上一页等于0时，继续上一页后还是停在第一页
		function findByPage1(formPage){
			var x=$('#sou1').val();
			if(x>0){
				x--;
			}else{
				alert("已经是第一页了");
			}
			$('#sou1').val(x);
			var fom = document.getElementById(formPage);
			var formdata = new FormData(fom);
			$.ajax({
				url:'/pan/user/all',
				type:'POST',
				data:formdata,
				processData: false,  // 告诉jQuery不要去处理发送的数据  
          		contentType: false,   // 告诉jQuery不要去设置Content-Type请求头  
          		success: function (data) {
          			var template = $('#user_details').html();
          			var resultText = ejs.render(template,data);
          			$('#table').html(resultText);
          			console.log(data);
          		},
          		error: function (err) {
          			console.log(err);
          		}
          	});

		}
		//表示下一页，下一页一直点击到总页数截止
		function findByPage2(formPage){
			var x=$('#sou1').val();
			if(x<$('.sou2').val()-1){
				x++;
			}else{
				alert("最后一页")
			}			
			$('#sou1').val(x);
			var fom = document.getElementById(formPage);
			var formdata = new FormData(fom);
			$.ajax({
				url:'/pan/user/all',
				type:'POST',
				data:formdata,
				processData: false,  // 告诉jQuery不要去处理发送的数据  
          		contentType: false,   // 告诉jQuery不要去设置Content-Type请求头  
          		success: function (data) {
          			if(data!==null){
          				var template = $('#user_details').html();
          				var resultText = ejs.render(template,data);
          				$('#table').html(resultText);
          			}
          			console.log(data);
          		},
          		error: function (err) {
          			console.log(err);
          		}
          	});
		}

		//调到首页直接通过body里面的onload="f1()"方法加载到第一页的数据
		function f1(){
			var formPage=['findByName_form',0];
			findByPage(formPage);
		}
		//尾页
		function findByPage3(){
			//alert($('.sou2').val()-1);
			var formPage=['findByName_form',$('.sou2').val()-1];
			findByPage(formPage);
		}

		//第一页
		function findByPage(formPage){
			$('#sou1').val(formPage[1]);
			var fom = document.getElementById(formPage[0]);
			var formdata = new FormData(fom);
			
			$.ajax({
				url:'/pan/user/all',
				type:'POST',
				data:formdata,
				processData: false,  // 告诉jQuery不要去处理发送的数据  
          		contentType: false,   // 告诉jQuery不要去设置Content-Type请求头  
          		success: function (data) {
          			var template = $('#user_details').html();
          			var resultText = ejs.render(template,data);
          			$('#table').html(resultText);
          			console.log(data);
          		},
          		error: function (err) {
          			console.log(err);
          		}
          	});
		}

		function findByName(fomId){
			var fom = document.getElementById(fomId);
			var formdata = new FormData(fom);
			var text = $('#sou').val();
			if($(text!=null)){
				$.ajax({
					url:'/pan/user/all',
					type:'POST',
					data:formdata,
				processData: false,  // 告诉jQuery不要去处理发送的数据  
          		contentType: false,   // 告诉jQuery不要去设置Content-Type请求头  
          		success: function (data) {
          			var template = $('#user_details').html();
          			var resultText = ejs.render(template,data);
          			$('#table').html(resultText);
          			console.log(data);
          		},
          		error: function (err) {
          			console.log(err);
          		}
          	});
			}
		}

		$.get('/pan/user/all',function(data){
			var template = $('#user_details').html();
			var resultText = ejs.render(template,data);
			$('#table').html(resultText);
		});

		// 格式日期
		function formatDate1(date){
			date = new Date(date);
			var add0 = function(num){
				if(num < 10) return "0" + num;
				return "" + num;
			};
			var dateStr = "";
			dateStr += date.getFullYear() + "-";
			dateStr += add0(date.getMonth() + 1) + "-";
			dateStr += add0(date.getDate()) + " ";
			dateStr += add0(date.getHours()) + ":";
			dateStr += add0(date.getMinutes()) + ":";
			dateStr += add0(date.getSeconds());
			return dateStr;
		}
		function formatDate2(date){
			date = new Date(date);
			var add0 = function(num){
				if(num < 10) return "0" + num;
				return "" + num;
			};
			var dateStr = "";
			dateStr += date.getFullYear() + "-";
			dateStr += add0(date.getMonth() + 1) + "-";
			dateStr += add0(date.getDate()) + " ";
			return dateStr;
		}
		Date.prototype.format = function(){
			return formatDate(this);
		};
	</script>

	<script id="user_details" type="text/template">
		<table  class="user_table">
			<% if (data.length) { %>
			<caption id="c" >以下是所有用户信息：</caption>
			<tr style="background-color: white;">
				<th>用户名</th>
				<th>邮箱账号</th>
				<th>注册时间</th>
				<th hidden="hidden">页数</th>
			</tr>
			<%
			for(var i in data){
			%>
			<tr >
				<td><%=data[i].userName%></td>
				<td><%=data[i].userEmail%></td>
				<td><%=formatDate1(data[i].registerTime)%></td>
				<td hidden="hidden"> <input  class="sou2" value="<%=data[i].yeshu%>"></td>
			</tr>
			<%
		}
		%>
	</table>
	<% } %>
</script>

</body>
</html>